<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="150px" :rules="formRule">
      <el-form-item label="租入合同编号:">
        <el-input v-model="form.contractId" size="small" disabled placeholder="系统自动生成" />
      </el-form-item>
      <el-form-item label="合同类型:" prop="contractType">
        <el-select v-model="form.contractType" size="small" placeholder="合同类型">
          <el-option label="租入合同" value="1" />
          <el-option label="租出合同" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="合同名称:" prop="contractName">
        <el-select v-model="form.contractName" size="small" placeholder="请选择合同名称">
          <el-option label="房屋租赁合同" value="房屋租赁合同" />
          <el-option label="设备租赁合同" value="设备租赁合同" />
        </el-select>
      </el-form-item>
      <el-form-item label="门店编码:" prop="storeId">
        <el-input v-model="form.storeId" size="small" placeholder="请选择门店编码" />
      </el-form-item>
      <el-form-item label="门店名称:" prop="storeName">
        <el-input v-model="form.storeName" size="small" placeholder="根据门店编码带出" />
      </el-form-item>
      <el-form-item label="套账编码:">
        <el-input v-model="form.financialCode" size="small" placeholder="请选择账套编码" />
      </el-form-item>
      <el-form-item label="公司编码:" prop="companyCode">
        <el-input v-model="form.companyCode" size="small" placeholder="请选择账套编码" />
      </el-form-item>
      <el-form-item label="公司名称:" prop="companyName">
        <el-input v-model="form.companyName" size="small" placeholder="根据门店编码带出" />
      </el-form-item>
      <el-form-item label="出租人名称:" prop="lessorName">
        <el-input v-model="form.lessorName" size="small" />
      </el-form-item>
      <el-form-item label="资产所在地点:" prop="assetsLocation">
        <el-input v-model="form.assetsLocation" size="small" />
      </el-form-item>
      <el-form-item label="建筑面积（㎡):">
        <el-input v-model="form.floorage" size="small" />
      </el-form-item>
      <el-form-item label="资产类别:" prop="assetsType">
        <el-select v-model="form.assetsType" size="small" placeholder="请选择合同名称">
          <el-option label="房屋" value="1" />
          <el-option label="设备" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="合同开始日期:" prop="contractStartTime">
        <el-date-picker
          v-model="form.contractStartTime"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="small"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="合同期限:" prop="contractPeriod">
        <el-input v-model="form.contractPeriod" size="small" />
      </el-form-item>
      <el-form-item label="免租开始日期:">
        <el-date-picker
          v-model="form.freeRentTimeStart"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="small"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="免租期限:">
        <el-input v-model="form.freeRentTerm" size="small" placeholder="系统自动计算N月" />
      </el-form-item>
      <el-form-item label="是否有押金:">
        <el-radio-group v-model="isSow.yaJin">
          <el-radio label="是" />
          <el-radio label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="isSow.yaJin === '是'" label="押金金额：:">
        <el-input size="small" />
      </el-form-item>
      <el-form-item v-if="isSow.yaJin === '是'" label="押金实际支付日期:">
        <el-input size="small" />
      </el-form-item>
      <el-form-item label="是否提供增值税专用发票:">
        <el-select v-model="form.isVatinvoice" size="small" placeholder="是否提供增值税专用发票">
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="发票税额:" prop="taxAmount">
        <el-input v-model="form.taxAmount" size="small" placeholder="根据发票税率计算得出" />
      </el-form-item>
      <el-form-item label="首期支付日期:">
        <el-date-picker
          type="date"
          size="small"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="租金支付方式:" prop="rentPayment">
        <el-select v-model="form.rentPayment" size="small" placeholder="租金支付方式">
          <el-option label="先付后使用" value="1" />
          <el-option label="先使用后付" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="门店开业日期:">
        <el-date-picker
          v-model="form.storeOpeningTime"
          type="date"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="合同是否可撤销:">
        <el-select v-model="form.iscontractRevoke" size="small" placeholder="租金支付方式">
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="使用面积（㎡):">
        <el-input v-model="form.area" size="small" />
      </el-form-item>
      <el-form-item label="租赁资产用途:" prop="leasePurpose">
        <el-select v-model="form.leasePurpose" size="small" placeholder="租金支付方式">
          <el-option label="门店经营" value="1" />
          <el-option label="办公" value="2" />
          <el-option label="职工福利" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="合同结束日期:" prop="contractEndTime">
        <el-date-picker
          v-model="form.contractEndTime"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="small"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="是否有免租期:">
        <el-radio-group v-model="isSow.zuQi">
          <el-radio label="是" />
          <el-radio label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="isSow.zuQi === '是'" label="免租结束日期:">
        <el-date-picker
          v-model="form.contractEndTime"
          type="date"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="合同总金额:" prop="contractMoneyNum">
        <el-input v-model="form.contractMoneyNum" size="small" disabled />
      </el-form-item>
      <el-form-item label="是否有定金:">
        <el-radio-group v-model="isSow.dingJin">
          <el-radio label="是" />
          <el-radio label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="isSow.dingJin === '是'" label="定金金额:">
        <el-input size="small" />
      </el-form-item>
      <el-form-item v-if="isSow.dingJin === '是'" label="定金实际支付日期:">
        <el-date-picker
          type="date"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="发票税率（%）:" prop="taxRate">
        <el-input v-model="form.taxRate" size="small" />
      </el-form-item>
      <el-form-item label="租金付款方式:">
        <el-input size="small" />
      </el-form-item>
      <el-form-item label="后续约定付款日:">
        <el-date-picker
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="small"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="是否为并购门店:">
        <el-input size="small" />
      </el-form-item>
      <el-form-item label="并购日期:">
        <el-input size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="submitForm('form')">添加合同</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { add } from '@/api/contract'
export default {
  name: 'UiAdd',
  data() {
    return {
      form: {
        contractId: null,
        contractType: '1',
        contractState: '2',
        contractName: '房屋租赁合同',
        financialCode: '',
        companyCode: '',
        companyName: '',
        storeId: '',
        storeName: '',
        contractPeriod: '',
        freeRentTimeStart: '',
        freeRentTimeEnd: '',
        freeRentTerm: '',
        rentPayment: '1',
        lessorName: '',
        assetsLocation: '',
        storeOpeningTime: '',
        iscontractRevoke: '',
        floorage: '',
        area: '',
        assetsType: '1',
        leasePurpose: '1',
        contractStartTime: '',
        contractEndTime: '',
        isSublease: '',
        contractMoneyNum: 0,
        isVatinvoice: '',
        taxRate: '',
        taxAmount: '',
        stopContract: '',
        falsifyMoney: '',
        falsifyPayTime: '',
        stopEffectTime: '',
        isOffsetMoney: 20.2,
        offsetMoney: '',
        depositReclaimTime: '',
        depositReclaimMoney: '',
        leasePay: '',
        unreFinancingMoney: '',
        impairmentTime: '',
        impairmentMoney: '',
        impairmentWhy: '',
        endTime: '',
        operUser: '',
        isChange: '',
        changeLessor: ''
      },
      isSow: {
        yaJin: '是',
        zuQi: '是',
        dingJin: '是'
      },
      formRule: {
        contractName: [{ required: true, message: '请选择合同名称', trigger: 'blur' }],
        contractType: [{ required: true, message: '请选择合同类型', trigger: 'blur' }],
        companyCode: [{ required: true, message: '请填写公司编号', trigger: 'blur' }],
        companyName: [{ required: true, message: '请填写公司名称', trigger: 'blur' }],
        storeId: [{ required: true, message: '请填写门店编码', trigger: 'blur' }],
        storeName: [{ required: true, message: '请填写门店名称', trigger: 'blur' }],
        contractPeriod: [{ required: true, message: '请选择合同期限', trigger: 'blur' }],
        rentPayment: [{ required: true, message: '请选择租金付款方式', trigger: 'blur' }],
        lessorName: [{ required: true, message: '请填写出租人名称', trigger: 'blur' }],
        assetsLocation: [{ required: true, message: '请填写出租人地址', trigger: 'blur' }],
        assetsType: [{ required: true, message: '请选择资产类别', trigger: 'blur' }],
        leasePurpose: [{ required: true, message: '请选择租赁资产用途', trigger: 'blur' }],
        contractStartTime: [{ required: true, message: '请选择合同开启日期', trigger: 'blur' }],
        contractEndTime: [{ required: true, message: '请选择合同结束日期', trigger: 'blur' }],
        taxRate: [{ required: true, message: '必填项', trigger: 'blur' }],
        taxAmount: [{ required: true, message: '必填项', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.form).then(res => {
            this.$message({ message: res.msg, type: 'success' })
            this.$refs[formName].resetFields()
          })
        } else {
          this.$message({ message: '请正确填写信息~', type: 'warning' })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.el-select,.el-date-picker{
		width:100%
	}
</style>
